// components/svga/svgaCanvas.js
const app = getApp();
const {
    Parser,
    Player
} = require("../../utils/svgaplayer.weapp")

// 创建SVGA播放器和解析器
const parser = new Parser();
const player = new Player;

//   let flag = false

let svgaCanvasId
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        svgaData: {
            type: Object,
            value: {},
            observer: function (newVal, oldVal) {
                // 页面被展示
                
                if (newVal) {
                    console.log('>>>>>>>值变化了', newVal)
                    this.setData({
                        svgaData: newVal
                    })
                    // if (newVal.pid) {
                    //     this.payCount(newVal)
                    // }
                }

            },
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        svgaStatus: false,
        svgaNum: 0, //
        yaoStatus: false, //是否摇

        svgaData: {
            url:"https://easysart.oss-cn-shenzhen.aliyuncs.com/yang/2023/Toyota/1023/se/se1030-1814.svga",
            start:false,
        },
    },
    // 组件生命周期
    lifetimes: {
        attached: function () {
            // svgaCanvasId = this
            console.log("attached")


        },
        ready: function () {
            console.log('ready>>>>>')
            
            // this.loadSvga()


        },
        detached: function () {
            // 组件被从页面节点树移除时触发
            // try {
            //     player.clear()
            //     debugger
            // }catch (error) {

            //     console.log(error);
            // }
        }
    },
    //页面生命周期
    pageLifetimes: {
        show: function () {
            // 这里调用接口 获取当前
            // this.pay()
            
            this.loadSvga()
            console.log(this.data)
     

            console.log('>>>>>>>更新数据了')

        },
        hide: function () {
            try {
                
                player.clear()

            }catch (error) {

                console.log(error);
            }


        },
        onReady: function () {
            
            console.log('>>>>>>>更新数据了')
            // this.loadSvga()
        },
        onUnload: function () {
            console.log('>>>>>>>更新数据了')
            // try {
            //     debugger
            //     player.clear()

            // }catch (error) {

            //     console.log(error);
            // }
            // this.loadSvga()
        },
    },
    /**
     * 组件的方法列表
     */
    methods: {
        async loadSvga() {

            try {
                // 创建SVGA播放器和解析器
                // const parser = new Parser();
                // const player = new Player;

                // await player.setCanvas('#demoCanvas','#svgaCanvasId')
                console.log(this)
                await player.setCanvas('#demoCanvas', this)
                // const videoItem = await parser.load(url);
                // const videoItem = await parser.load("/assets/se1030.svga");
                // const videoItem = await parser.load("https://easysart.oss-cn-shenzhen.aliyuncs.com/yang/2023/Toyota/1023/se/se1030.svga");
                // const videoItem = await parser.load("https://easysart.oss-cn-shenzhen.aliyuncs.com/yang/2023/Toyota/1023/se/se.svga");
                // const videoItem = await parser.load("https://easysart.oss-cn-shenzhen.aliyuncs.com/yang/2023/Toyota/1023/se/se1030-1746.svga");
                // const videoItem = await parser.load("https://easysart.oss-cn-shenzhen.aliyuncs.com/yang/2023/Toyota/1023/se/se1030-1814.svga");
                console.log(this.data.svgaData.url)
                const videoItem = await parser.load(this.data.svgaData.url);
                this.setData({
                    svgaStatus: true,
                })
                console.log(videoItem)
                await player.setVideoItem(videoItem); // 设置视频对象
                player.loops = 0; //循环次数，默认值0代表无限循环。  
                player.clearsAfterStop = true; //默认值为true，表示动画结束时清空画布
                player.fillMode = "Forward";
                //   fillMode; 可选值 Forward / Backward ，经测试默认值好像是Forward 当 clearsAfterStop 为 false 时，Forward 表示动画会在结束后停留在最后一帧，Backward 则会在动画结束后停留在第一帧。

                
                if(this.data.svgaData.start){
                    player.startAnimation(); //启动动画
                }

                player.onFinished(function () {
                    console.log("动画停止了")
                })

                // flag = true
                // player.onPercentage(function (res) {
                //     console.log(res)
                // })

            } catch (error) {

                console.log(error);
            }
        },


        yaoTap(num) {

            switch (parseInt(num)) {


                case 4:
                    player.startAnimation();
                    break;
                case 5:
                    player5.startAnimation();
                    break;
                case 6:
                    player6.startAnimation();
                    break;



                default:
                    wx.showModal({
                        title: '抱歉',
                        content: '网路繁忙',
                        complete: (res) => {

                        }
                    })

            }

            //  this.triggerEvent('yaoTap', {
            //     data: true
            // })
        },

        // 获取用户信息
        pay() {
            var that = this
            wx.showLoading()
            return new Promise(function (resolve, reject) {
                app.$http.get('/game/dice/pay').then(res => {
                    console.log(res)
                    wx.hideLoading()




                    if (res.code == '200') {
                        let data = res.data[0]


                        player.startAnimation();
                        that.setData({
                            yaoStatus: true
                        })

                        setTimeout(() => {
                            let svgaNum = data.num / 100


                           

                            that.setData({
                                yaoStatus: false,
                                svgaNum,
                            })

                            player.stopAnimation()
                            that.triggerEvent('svgaTriggerEvent', {
                                data: data.num
                            })
                            console.log(that.data.yaoStatus)


                        }, 1500);


                    } else {
                        // that.setData({
                        //     svgaNum: 6,
                        // })
                        that.triggerEvent('svgaTriggerEvent', {
                            data: 0
                        })
                        wx.showToast({
                            title: res.message,
                            icon: "none"
                        })
                    }

                    resolve(res); // 把 res 返回出去


                }).catch(error => {
                    console.log(error)


                    wx.showToast({
                        title: error.message,
                        icon: "none"
                    })
                    resolve(reject); // 把 res 返回出去
                })
            })


            // ceshi

            console.log(this)





        },
    }
})